<template>
  <card v-bind="options1">
    <div class="index">
      <!-- 工具栏 -->
      <y-table-handler ref="$handler">
        <y-table-filter
          :options="filter"
          @search="searchHandler"
        ></y-table-filter>
        <y-table-operation
          v-bind="operations"
          @add="addHandler"
          @edit="editHandler"
          @delete="deleteHandler"
          @categoryAdd="categoryAddHanlder"
          @categoryDelete="categoryDeleteHanlder"
          @categoryEdit="categoryEditHanlder"
        ></y-table-operation>
      </y-table-handler>
      <!-- 分割 -->
      <y-split :sizes="[15, 85]" ref="$split">
        <!-- 数据项分类 -->
        <template slot="left">
          <y-table-tree
            ref="$categor"
            v-bind="categorysOptions"
            @load="loadCategorys"
            @select="categorysSelectHandler"
          ></y-table-tree>
        </template>
        <!-- 数据项列表 -->
        <template slot="right">
          <y-table ref="$dataItem" v-bind="dataItemOptions"></y-table>
        </template>
      </y-split>
    </div>
  </card>
</template>

<script>
var _this;
export default {
  data() {
    return {
      searchParams: {},
      options1: {
        title: "数据",
        type: "index",
      },
      filter: [
        {
          type: "input",
          field: "keyword",
          placeholder: "请输入关键字",
          bind: [],
        },
      ],
      operations: {
        btns: ["add", "edit", "delete"],
        more: [
          { label: "分类添加", trigger: "categoryAdd" },
          { label: "分类删除", trigger: "categoryDelete" },
          { label: "分类编辑", trigger: "categoryEdit" },
        ],
      },
      categorysOptions: {
        data: [],
        treeConfig: {
          expandAll: true,
        },
        columns: [{ field: "label", title: "分类", treeNode: true }],
      },
      dataItemOptions: {
        columns: [
          { type: "seq", width: 50 },
          { field: "code", title: "编码" },
          { field: "name", title: "名称" },
          { field: "type", title: "类型" },
        ],
        data: [],
      },
    };
  },
  created() {
    _this = this;
    this.init();
  },
  mounted(){
    this.$refs.$split.$el.style.height = `calc(100% - ${this.$refs.$handler.$el.clientHeight}px)`
  },
  methods: {
    init() {
      this.loadCategorys();
    },
    /**
     * 分类加载
     */
    async loadCategorys(row, callback) {
      var { data } = await $y.api.system.dataItem.getCategorys();
      this.categorysOptions.data = data;
    },
    /**
     * 分类选择
     */
    async categorysSelectHandler({ data }) {
      this.searchHandler({ categoryId: data.id });
    },
    /**
     * 添加
     */
    addHandler(event,next) {
      var { api: categoryApi } = this.$refs.$categor;
      var { id: parentId } = categoryApi.getCurrentRecord() || {};
      next({ parentId });
    },
    /**
     * 编辑
     */
    editHandler(e,next) {
      var { api } = this.$refs.$dataItem;
      var { id } = api.getCurrentRecord() || {};
      next({ keyValue: id });
    },
    /**
     * 删除
     */
    async deleteHandler() {
      var res = await $y.confirm.warning("是否确认删除！");
      if (res) {
        var { api } = this.$refs.$dataItem;
        var { id } = api.getCurrentRecord() || {};
        var res = await this.$y.api.system.dataItem.remove(id);
      }
    },
    /**
     * 分类增删改
     */
    async categoryAddHanlder() {
    },
    async categoryDeleteHanlder() {},
    async categoryEditHanlder() {},
    /**
     * 查询
     */
    async searchHandler(params) {
      var { data } = await $y.api.system.dataItem.getList(params);
      this.dataItemOptions.data = data.items;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>